<template>
  <div class="game-center">
    <!-- 顶部导航 -->
    <NavView />
    <div class="loop-bg">
      <el-carousel height="300px">
        <el-carousel-item v-for="(item, index) in imgs" :key="index">
          <img :src="item.url" alt="">
          <div class="game-info-container">
            <div class="info-content">
              <div class="icon-container">
                <!-- Replace with your actual icon component or img tag -->
                <div class="game-icon"></div>
              </div>
              <div class="text-container">
                <div class="title">{{ item.title }}</div>
                <div class="subtitle">{{ item.subtitle }}</div>
              </div>
            </div>
            <button class="download-btn">下载</button>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="game-content">
        <div class="game-info"></div>
      </div>
    </div>
    <!-- 推荐游戏 -->
    <IroGame/>
    <!-- 热榜 -->
     <GameList/>
     <!-- 游戏视频 -->
      <VideoGame/>
  </div>
</template>

<script setup>
import img1 from '@/assets/imgs/game_center/loop_img1.png'
import img2 from '@/assets/imgs/game_center/loop_img2.png'
import img3 from '@/assets/imgs/game_center/loop_img3.png'
import NavView from '../GameCenter/components/NavView.vue'
import IroGame from '../GameCenter/components/IroGame.vue'
import GameList from '../GameCenter/components/GameList.vue'
import VideoGame from '../GameCenter/components/VideoGame.vue'
const imgs = [
  {
    url: img1,
    title: '爆裂小队',
    subtitle: '艾尔携手黄金玩法上线！'
  },
  {
    url: img2,
    title: '爆裂小队',
    subtitle: 'S2新赛季黄金玩法上线！'
  },
  {
    url: img3,
    title: '青藏族线',
    subtitle: '4月18日错过'
  }
];
</script>

<style scoped lang="scss">
.game-center {
  .loop-bg {
    position: relative;

    img {
      height: 100%;
      object-fit: cover;
      object-position: center top;
      width: 100%;
    }

    .game-info-container {
      position: absolute;
      bottom: 40px;
      left: 20px;
      background: rgba(0, 0, 0, 0.6);
      padding: 15px;
      border-radius: 8px;
      width: 200px;

      .info-content {
    display: flex;
        gap: 10px;
        margin-bottom: 10px;

        .icon-container {
          .game-icon {
            width: 40px;
            height: 40px;
            background-color: #ccc; // Replace with your icon
            border-radius: 8px;
          }
        }

        .text-container {
          .title {
            font-size: 16px;
            font-weight: bold;
            color: white;
          }

          .subtitle {
            font-size: 12px;
            color: #ddd;
          }
        }
      }

      .download-btn {
        width: 100%;
        padding: 8px 0;
        background-color: #ff6600;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;

        &:hover {
          background-color: #ff8533;
        }
      }
    }

    .game-content {
      display: flex;
      flex-direction: column;
      width: 100%;

      .game-info {
        gap: 12px;
      }
    }
  }
}
</style>
